<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		.box{
			width: 600px;
			height: 600px;
			border-radius: 50%;
			box-shadow:5px 5px 10px 3px black; 
			background-color: gray;
			position: relative;
			background-image: linear-gradient(to right bottom,white,orange,white);
		}
		.clock{
			width: 500px;
			height: 500px;
			border-radius: 50%;
			box-shadow: inset 5px 5px 5px 1px gray;
			margin:50px; 
			position:absolute;
			background-color:white;
		}
		.kedu{
			width: 20px;
			height: 250px;
			/*background-color: red;*/
			position: absolute;
			transform-origin:bottom center;
			left:240px;
		}
		.num{
			width: 20px;
			height: 250px;
			/*background-color: blue;*/
			position: absolute;
			transform-origin:bottom center;
			left:230px;

		}
		.kedu>span{
			width: 3px;
			height:5px;
			background-color: black;
			display: inline-block;
			margin-left:6px;
			position: absolute; 
		}
		.kedu:nth-child(5n+1)>span{
			width: 5px;
			height: 8px;
			background-color:black;
		}
		.num>span{
			display: inline-block;
			width: 40px;
			height: 40px;
			font-size: 25px;
			text-align: center;
			line-height: 40px;

		}
		#hour,#minute,#second{
			position: absolute;
			transform-origin:bottom center;
		}
		#hour{
			width: 15px;
			height: 150px;
			background-color: red;
			left: 238px;
			top:100px;
		}
		#minute{
			width: 10px;
			height: 180px;
			background-color: yellow;
			left: 240px;
			top:70px;
		}
		#second{
			width: 8px;
			height: 200px;
			background-color: orange;
			left: 243px;
			top:50px;
		}


	</style>
</head>
<body>
	<div class="box">
		<div class="clock">
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>
			<div class="kedu"><span></span></div>

			<div class="num"><span>1</span></div>
			<div class="num"><span>2</span></div>
			<div class="num"><span>3</span></div>
			<div class="num"><span>4</span></div>
			<div class="num"><span>5</span></div>
			<div class="num"><span>6</span></div>
			<div class="num"><span>7</span></div>
			<div class="num"><span>8</span></div>
			<div class="num"><span>9</span></div>
			<div class="num"><span>10</span></div>
			<div class="num"><span>11</span></div>
			<div class="num"><span>12</span></div>

			<div id="hour"></div>
			<div id="minute"></div>
			<div id="second"></div>

		</div>
	</div>
</body>
</html>
<script>
	var keDuArr =  document.getElementsByClassName("kedu");
	
	for( i = 0; i < keDuArr.length; i++){
		keDuArr[i].style.transform="rotate("+i*6+"deg)";
	}
	var numArr = document.getElementsByClassName("num");
	for(i=0;i<numArr.length;i++){
	var rotate=i*30+30;
	// 获取num div
	var numDiv=numArr[i]

	numDiv.style.transform="rotate("+(i*30+30)+"deg)";
	var span = numDiv.children[0];
	 rotate=-1*rotate;
	span.style.transform="rotate("+rotate+"deg)";


}
	var hourDiv = document.getElementById("hour");
	var secondDiv = document.getElementById("second");
	var minuteDiv = document.getElementById("minute");
	click();
	setInterval(click,500);
function click(){
	// 创建日期对象
	var now = new Date();
	// 获取小时
	var hour = now.getHours();
	// 获取分钟
	var minute = now.getMinutes();
	// 获取秒数
	var second = now.getSeconds();
	var sDeg = second*6;
	secondDiv.style.transform = "rotate("+sDeg+"deg)";
	var mDeg = minute*6+6/60*second;
	minuteDiv.style.transform = "rotate("+mDeg+"deg)";
	var hDeg = hour*30+30/60*minute+30/3600*second;
	hourDiv.style.transform = "rotate("+hDeg+"deg)";
	
}
	









</script>
